<template>
  <view class="page-body flex-col">
    <div class="page-tabs">
      <u-tabs
        :active-item-style="{
          fontSize: '32rpx',
        }"
        font-size="28"
        height="92"
        bar-width="40"
        active-color="#000"
        :list="tabsList"
        :is-scroll="true"
        :current="current"
        @change="tabsChange"
      ></u-tabs>
    </div>

    <scroll-view @scrolltolower="loadData(false)" scroll-y class="page-content flex-h-1">
      <OrderList :pageData="pageData" @loadData="loadData"></OrderList>
    </scroll-view>
  </view>
</template>
<script>
import {
  waitBindOrderList,
  orderList as orderListApi,
} from "@/api/service-home";
import OrderList from "@/service-home/components/order-list";
export default {
  components: {
    OrderList,
  },
  data() {
    return {
      pageData: {
        page: 1,
        list: [],
        loadmoreStatus: "loadmore",
      },
      tabsList: [
        {
          name: "新订单",
        },
        {
          name: "已忽略",
        },
        {
          name: "历史记录",
        },
      ],
      current: 0,
    };
  },
  onLoad() {
    this.loadData();
  },
  onShow() {},
  methods: {
    tabsChange(e) {
      this.current = e;
      this.loadData(true);
    },
    async loadData(reset) {
      if (reset) {
        this.pageData = this.$options.data().pageData;
      }

      if (this.pageData.loadmoreStatus == "nomore") return;

      var res;
      if (this.current !== 2) {
        res = await waitBindOrderList(
          {
            page: this.pageData.page,
            type: (() => {
              switch (this.current) {
                case 0:
                  return 1;
                case 1:
                  return 2;
              }
            })(),
          },
          true
        );
      } else {
        res = await orderListApi(
          {
            page: this.pageData.page,
            is_hold: 1,
          },
          true
        );
      }

      this.pageData.list = [...this.pageData.list, ...res.data.list];
      this.pageData.loadmoreStatus =
        this.pageData.list.length >= res.data.totalCount
          ? "nomore"
          : "loadmore";
      this.pageData.page++;
    },
  },
  computed: {},
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.page-tabs {
  /deep/ .u-tabs {
    .u-tab-bar {
      background-color: #f0250e !important;
      bottom: 10rpx;
    }
  }
}

.page-body {
  height: 100vh;
  .page-content {
    background: #f2f2f2;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
